<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Waner - 个人信息</title>
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" type="text/css" th:href="@{/layuiadmin/layui/css/layui.css}">
    <link rel="stylesheet" type="text/css" th:href="@{/layuiadmin/myfile/main.css}">
</head>
<body class="micronews">
<div class="micronews-header-wrap">
    <div class="micronews-header w1000 layui-clear">
        <h1 class="logo">
            <a href="/">
                <img width="66px" height="22px" th:src="@{/layuiadmin/myfile/images/logo3.png}" alt="logo">
                <span class="layui-hide">logo</span>
            </a>
        </h1>
        <p class="nav">
            <a href="/front/page/index">推荐</a>
            <a href="/travel-essay/list-page">游记</a>
            <a href="/question/list-page">问答</a>
        </p>
        <div class="search-bar">
            <form class="layui-form" action="">
                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <input type="text" name="title" placeholder="搜索你要的内容" autocomplete="off" class="layui-input">
                        <button class="layui-btn search-btn" formnovalidate><i class="layui-icon layui-icon-search"></i>
                        </button>
                    </div>
                </div>
            </form>
        </div>
        <div class="login">
            <a th:if="${session.sessionUser == null}" href="/front/page/login">
                登录
            </a>
            <!--<img th:src="@{/layuiadmin/myfile/images/header.png}" style="width: 36px; height: 36px;">-->
            <ul th:if="${session.sessionUser != null}" class="layui-nav" style="background-color: #fff;"
                lay-filter="component-nav">
                <li class="layui-nav-item">
                    <a href="/travel-essay/page" style="font-size: 16px;color: #222;">写游记</a>
                </li>
                <li class="layui-nav-item">
                    <a href="/question/form-page" style="font-size: 16px;color: #222;">提问</a>
                </li>
                <li class="layui-nav-item" lay-unselect="">
                    <a href="javascript:;" style="font-size: 16px;color: #222;"><span
                            th:text="${session.sessionUser.nickname}"></span></a>
                    <dl class="layui-nav-child">
                        <dd style="text-align: center;"><a href="/user/info-form">修改信息</a></dd>
                        <dd style="text-align: center;"><a href="/user/person-info">个人资料</a></dd>
                        <dd layadmin-event="logout" style="text-align: center;"><a href="javascript:;">退出登录</a></dd>
                    </dl>
                </li>
            </ul>
        </div>
        <div class="menu-icon">
            <i class="layui-icon layui-icon-more-vertical"></i>
        </div>
    </div>
</div>


<div class="micronews-persInfo-wrap">
    <div class="micronews-container micronews-details-container micronews-persInfo-content w1000">
        <div class="layui-fluid">
            <div class="layui-row">
                <div class="layui-col-xs12 layui-col-sm12 layui-col-md3">
                    <div class="popular-info">
                        <div class="layui-card">
                            <div class="layui-card-header">
                                <a href="javascript:return false;">
                                    <img style="width: 80px;height: 80px;" th:if="${session.sessionUser.imgUrl != null}"
                                         th:src="${session.sessionUser.imgUrl}">
                                </a>
                                <p class="name"><span th:text="${session.sessionUser.nickname}"></span></p>
                            </div>
                            <div class="layui-card-body">
                                <ul class="tab" id="tabHeader" lay-filter="myInfo">
                                    <li lay-id="zx">我的撰写</li>
                                    <li lay-id="sc">我的收藏</li>
                                    <li lay-id="hf">我的回复</li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="layui-col-xs12 layui-col-sm12 layui-col-md9">
                    <div class="main">
                        <div class="leave-message" id="tabBody">
                            <!-- 我的撰写 -->
                            <div class="content-box">
                                <div class="ulCommentList" id="zx-view">

                                </div>
                                <div id="zx-page" style="text-align: center;"></div>
                            </div>
                            <!-- 结束-我的撰写 -->

                            <!-- 我的收藏 -->
                            <div class="content-box">
                                <div class="ulCommentList" id="sc-view">
                                </div>
                                <div id="sc-page" style="text-align: center;"></div>
                            </div>
                            <!-- 结束-我的收藏 -->

                            <!-- 我的评论 -->
                            <div class="content-box">
                                <div class="ulCommentList" id="hf-view">

                                </div>
                                <div id="hf-page" style="text-align: center;"></div>
                            </div>
                            <!-- 结束-我的评论 -->


                        </div>
                    </div>
                </div>


            </div>
        </div>
    </div>
</div>

<!-- 我的撰写 -->
<script id="zx-tpl" type="text/html">
    {{#  layui.each(d, function(index, item){ }}
    <div class="liCont">
        <div class="item">
            <div class="item-info">
                <h4>
                    {{# if(item.tag == 'essay'){ }}
                    <a href="/travel-essay/detail-page?id={{item.id}}">{{item.title}}</a>
                    {{# } }}
                    {{# if(item.tag == 'question'){ }}
                    <a href="/question/detail-page?id={{item.id}}">{{item.title}}</a>
                    {{# } }}
                </h4>
                <div class="b-txt">
                    {{# if(item.tag == 'essay'){ }}
                    <span class="label">游记</span>
                    {{# } }}
                    {{# if(item.tag == 'question'){ }}
                    <span class="label">问答</span>
                    {{# } }}
                    <span class="icon time">
                              <i class="layui-icon layui-icon-log"></i>
                             {{item.createTime}}
                            </span>
                </div>
            </div>
        </div>
    </div>
    {{#  }); }}
</script>
<!-- 结束-我的撰写 -->

<!-- 我的收藏 -->
<script id="sc-tpl" type="text/html">
    {{#  layui.each(d, function(index, item){ }}
    <div class="liCont">
        <div class="item">
            <div class="item-info">
                <h4>
                    {{# if(item.tag == '游记'){ }}
                    <a href="/travel-essay/detail-page?id={{item.id}}">{{item.title}}</a>
                    {{# } }}
                    {{# if(item.tag == '问答'){ }}
                    <a href="/question/detail-page?id={{item.id}}">{{item.title}}</a>
                    {{# } }}
                    {{# if(item.tag == '推荐'){ }}
                    <a href="/recommend/detail-page?id={{item.id}}">{{item.title}}</a>
                    {{# } }}
                </h4>
                <div class="b-txt">
                    <span class="label">{{item.tag}}</span>
                    <span class="icon time">
                              <i class="layui-icon layui-icon-log"></i>
                             {{item.createTime}}
                            </span>
                </div>
            </div>
        </div>
    </div>
    {{#  }); }}
</script>
<!-- 结束-我的收藏 -->


<!-- 我的回复 -->
<script id="hf-tpl" type="text/html">
    {{#  layui.each(d, function(index, item){ }}
    <div class="liCont">
        <div class="item">
            <div class="item-info">
                <h4>
                    {{# if(item.tag == '游记'){ }}
                    <a href="/travel-essay/detail-page?id={{item.articleId}}">{{item.articleTitle}}</a>
                    {{# } }}
                    {{# if(item.tag == '问答'){ }}
                    <a href="/question/detail-page?id={{item.articleId}}">{{item.articleTitle}}</a>
                    {{# } }}
                </h4>
                <div class="b-txt">
                    <span class="label">{{item.tag}}</span>
                    <span class="icon message">
                              <i class="layui-icon layui-icon-dialogue"></i>
                              {{item.commentsCount}}
                            </span>
                    <span class="icon time">
                              <i class="layui-icon layui-icon-log"></i>
                             {{item.articleCreateTime}}
                            </span>
                </div>
            </div>
        </div>

        {{# if(item.userHeadImgUrl != null){ }}
        <a href="javascript:return false;">
            <img src="{{item.userHeadImgUrl}}" />
        </a>
        {{# } }}
        <div class="item-cont">
            <div class="cont">
                <p><span class="name">{{item.userNickname}}</span><span class="time">{{item.responseCreateTime}}</span></p>
                <p class="text">
                    {{item.responseContent}}</p>
            </div>
        </div>
    </div>
    {{#  }); }}
</script>
<!-- 结束-我的回复 -->


<div class="micronews-footer-wrap">
    <div class="micronews-footer w1000">
        <div class="Copyright">
            <span>Copyright&nbsp;</span>&nbsp;&copy;<span>Waner旅游网&nbsp;&nbsp;</span>
        </div>
    </div>
</div>
<script th:src="@{/layuiadmin/layui/layui.js}"></script>
<!--[if lt IE 9]>
<script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
<script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<script th:inline="javascript">
    layui.config({
        base: '/layuiadmin/'
    }).extend({
        index: 'lib/index'
    }).use(['index', 'news', 'element', 'laypage', 'laytpl'], function () {
        var news = layui.news
            , $ = layui.$
            , admin = layui.admin
            , element = layui.element
            , laypage = layui.laypage
            , laytpl = layui.laytpl;

        // 设置首页页码
        var page = 1;
        var limit = 10;

        // 导航渲染
        element.render('nav', 'component-nav');


        // 获取user信息
        var user = [[${session.sessionUser}]];
        // 请求我的撰写列表
        admin.req({
            url: '/common/articles'
            , type: 'get'
            , data: {page: page, limit: limit, userId: user.id}
            , async: false
            , success: function (res) {
                // 获取节点
                var getTpl = document.getElementById('zx-tpl').innerHTML;
                // 执行tpl渲染
                laytpl(getTpl).render(res.data, function (html) {
                    document.getElementById('zx-view').innerHTML = html;
                });
                laypage.render({
                    elem: 'zx-page'
                    , count: res.count
                    , first: '首页'
                    , last: '尾页'
                    , prev: '<em>←</em>'
                    , next: '<em>→</em>'
                    , limit: limit
                    , jump: function (obj, first) {
                        page = obj.curr;
                        limit = obj.limit;
                        if (!first) {
                            // loadData();
                            admin.req({
                                url: '/common/articles'
                                , type: 'get'
                                , async: false
                                , data: {page: page, limit: limit, userId: user.id}
                                , success: function (res) {
                                    // 获取节点
                                    var getTpl = document.getElementById('zx-tpl').innerHTML;
                                    // 执行tpl渲染
                                    laytpl(getTpl).render(res.data, function (html) {
                                        document.getElementById('zx-view').innerHTML = html;
                                    });
                                }
                            });
                        }
                    }
                });

            }
        });
        // 请求我的回复列表
        admin.req({
            url: '/common/responses'
            , type: 'get'
            , data: {page: page, limit: limit, userId: user.id}
            , async: false
            , success: function (res) {
                // 获取节点
                var getTpl = document.getElementById('hf-tpl').innerHTML;
                // 执行tpl渲染
                laytpl(getTpl).render(res.data, function (html) {
                    document.getElementById('hf-view').innerHTML = html;
                });
                laypage.render({
                    elem: 'hf-page'
                    , count: res.count
                    , first: '首页'
                    , last: '尾页'
                    , prev: '<em>←</em>'
                    , next: '<em>→</em>'
                    , limit: limit
                    , jump: function (obj, first) {
                        page = obj.curr;
                        limit = obj.limit;
                        if (!first) {
                            // loadData();
                            admin.req({
                                url: '/common/responses'
                                , type: 'get'
                                , async: false
                                , data: {page: page, limit: limit, userId: user.id}
                                , success: function (res) {
                                    // 获取节点
                                    var getTpl = document.getElementById('hf-tpl').innerHTML;
                                    // 执行tpl渲染
                                    laytpl(getTpl).render(res.data, function (html) {
                                        document.getElementById('hf-view').innerHTML = html;
                                    });
                                }
                            });
                        }
                    }
                });

            }
        });

        admin.req({
            url: '/common/collections'
            , type: 'get'
            , data: {page: page, limit: limit, userId: user.id}
            , async: false
            , success: function (res) {
                // 获取节点
                var getTpl = document.getElementById('sc-tpl').innerHTML;
                // 执行tpl渲染
                laytpl(getTpl).render(res.data, function (html) {
                    document.getElementById('sc-view').innerHTML = html;
                });
                laypage.render({
                    elem: 'sc-page'
                    , count: res.count
                    , first: '首页'
                    , last: '尾页'
                    , prev: '<em>←</em>'
                    , next: '<em>→</em>'
                    , limit: limit
                    , jump: function (obj, first) {
                        page = obj.curr;
                        limit = obj.limit;
                        if (!first) {
                            // loadData();
                            admin.req({
                                url: '/common/collections'
                                , type: 'get'
                                , async: false
                                , data: {page: page, limit: limit, userId: user.id}
                                , success: function (res) {
                                    // 获取节点
                                    var getTpl = document.getElementById('sc-tpl').innerHTML;
                                    // 执行tpl渲染
                                    laytpl(getTpl).render(res.data, function (html) {
                                        document.getElementById('sc-view').innerHTML = html;
                                    });
                                }
                            });
                        }
                    }
                });

            }
        });



        news.omitted('.item-cont .cont .text', 100);
        news.arrowutil();

        news.seachBtn();



        element.tab({
            headerElem: '#tabHeader>li' //指定tab头元素项
            , bodyElem: '#tabBody>.content-box' //指定tab主体元素项
        });
        var layid = location.hash.replace(/^#myInfo=/, '');
        element.tabChange('myInfo', layid);

        //监听Tab切换，以改变地址hash值
        element.on('tab(myInfo)', function () {
            location.hash = 'myInfo=' + this.getAttribute('lay-id');
        });

        var url = window.location.hash;
        var loc = url && url.substring(url.lastIndexOf('=') + 1, url.length) || false;
        // 设置为同步触发事件
        if (!loc || loc === 'zx') {
            $("[lay-id=zx]").trigger("click");
        } else if (loc === 'sc') {
            $("[lay-id=sc]").trigger("click");
        } else if (loc === 'hf') {
            $("[lay-id=hf]").trigger("click");
        }
    });
</script>
</body>
</html>